import menu from './menu.vue'
import { createApp } from 'vue'
let instance
const onUnmount=() => {
    if(!instance) return
    instance.unmount()
    document.body.removeChild(instance.parentNode)
    instance = null
}
document.body.addEventListener('mousedown', () => {
    onUnmount()
})
export const useContextMenu = function () {
    return {
        showMenu(e,params) {
            const {menuList}=params
            const {
                clientX,
                clientY
            } = e
           onUnmount()
            instance = createApp(menu, {
                top: clientY + 'px',
                left: clientX + 'px',
                menuList
            })
            const parentNode = document.createElement('div')
            document.body.appendChild(parentNode)
            instance.mount(parentNode)
            instance.parentNode = parentNode
        }
    }
}